import React from 'react';

import './static/css/login.css';
import $ from 'jquery';
import {browserHistory} from 'react-router';

import axios from 'axios';


class Register1 extends React.Component{
    constructor(props){
        super(props);
    }
     componentDidMount(){
         var that=this;
       function showDialog(str){
        $(".alertbox").html(str)
            $(".alertbox").css("opacity","1");
            var width = parseInt($(".alertbox").css("width"))/2;
            $(".alertbox").css("margin-left",-width);
            $(".alertbox").stop().animate({  
                opacity: 0  
            }, 3000); 
    }
    var submitBtn = $(".submitBtn").get(0);
    $(".submitBtn").click(function(){
        var result=$(".phone").val();
        if(result==""){
            showDialog("请填写手机号！")
          
        }else if(/^1[34578]\d{9}$/.test(result)==false){ 
            showDialog("请填写正确手机号!")
        }else {  
            axios.post('http://127.0.0.1:2000/api/registerTel',{tel:result})
            .then(function (response) {
                console.log(response);
                if(response.data.mes==""){
                    browserHistory.push('Register2');
                   }
                else{
                    browserHistory.push('Login');  //js路由跳转
                }
                localStorage.setItem("tel",result);
                
            })
            .catch(function (error) {
                console.log(error);
            });
           
        }  
    })
    }
    render(){
        return(
            <div className="register1">
                 <header className="header7">
                     <a href=""><i className="iconfont">&#xe607;</i></a> 注册
                </header>
                <p className="tip">输入您的手机号码，点击下一步继续注册</p>
                <div className="formbox">
                    <input ref="phone" className="phone" type="" placeholder="手机号" maxlength="11" />
                </div>

                <button className="submitBtn">下一步 </button>
                <div className="alertbox"></div>
            </div>
        )
    }
}

export default Register1;